
<!--
 * @Author: wang_sheshe
 * @Date: 2021-05-19 10:49:03
 * @LastEditTime: 2021-07-10 14:35:30
 * @Description: 设备台账
-->
<template>
    <div id="fire_page">
        <van-nav-bar title="台账" left-arrow fixed @click-left="back" fixed>
            <!-- <template slot="right">
                <div class="parent-circle">
					<div class="child-circle"></div>
				</div>
            </template> -->
        </van-nav-bar>
        <van-row>
            <van-tabs v-model="active" style="position: fixed;top:45px;z-index: 50;">
                <van-tab title="资产参数" name="1"> 
                    <van-cell class="content-title" :border="false" title="参数列表列表" value="">
                        <template slot="title">
                            <span class="border-icon"></span>
                            <span style="font-size:16px;">参数列表</span>
                        </template>
                    </van-cell>
                    <div class="content">
                        <van-cell-group class="content-list" :border="false">
                            <van-cell v-for="(item, index) in assetParameters" :key="index" :title="item.labelName" :value="item.labelText" />
                        </van-cell-group>  
                    </div>
                </van-tab>
                <van-tab title="物理参数" name="2"> 
                    <van-cell class="content-title" :border="false" title="参数列表列表" value="">
                        <template slot="title">
                            <span class="border-icon"></span>
                            <span>参数列表</span>
                        </template>
                    </van-cell>
                    <div class="content">
                        <van-cell-group class="content-list" :border="false">
                            <van-cell v-for="(item, index) in physicalParams" :key="index" :title="item.labelName" :value="item.labelText" />
                        </van-cell-group>  
                    </div>
                </van-tab>
                <van-tab title="运行参数" name="3"> 
                    <van-cell class="content-title" :border="false" title="参数列表列表" value="">
                        <template slot="title">
                            <span class="border-icon"></span>
                            <span>参数列表</span>
                        </template>
                    </van-cell>
                    <div class="content">
                        <van-cell-group class="content-list" :border="false">
                            <van-cell v-for="(item,index) in operationParams" :key="index" :title="item.labelName" :value="item.labelText" />
                        </van-cell-group> 
                    </div>
                </van-tab>
            </van-tabs>
        </van-row>
    </div>
</template>
<script type="text/javascript">
import {getAssetParameters,getOperationParameters,getPhysicalParameters,} from '../../api/physical';
import {getDevAccount} from '../../api/tourTask';
import Util from "@/utils/util"
export default {
    name: "copyMenu",
    components: {
       
    },
    data() {
        return {
            loading: false,
            finished:false,
            refreshing: false,
            active:0,
            loading: false,
            assetParameters: [],//资产参数
            operationParams:[],//运行参数
            physicalParams:[],//物理参数
            icon: {
                screen: require("@/assets/firePro/creen.svg")
            },
            userInfo: {},
            taskInfo:{}
        }            
    },
    methods: {
        /**
         * 返回
         */
        back(){
            this.$router.push({
                name:"executeIndex",
                params: {
                    taskInfo: this.taskInfo
                }
            })
        },

        /**
         * @description: 获取设备台账
         * @param {*}
         * @return {*}
         */
         getDevAccount() {
            var self = this;
            var params = {
                deviceId: "5bb79fdf9c8a06deef584978b501585bb75cf46b6f",
                deviceTypeId: "0325",
                userId: this.userInfo.userId,//用户id
                roleCode: "",//用户角色
            }
            this.$Toast.loading({
                    duration: 0,//展示时长 0不会消失
                    message: "巡视设备台账获取中...",
                    forbidClick: true,//是否禁止背景点击
                    overlay: true//是否显示背景遮罩层
                })
            getDevAccount(params).then(data => {
                self.$Toast.clear();
                if(data.success) {
                    self.$Toast.success(data.msg)
                    //self.assetParameters = data.data;//试验记录表
                    self.dealResultData(data.data);
                }else{
                    self.$Toast.fail(data.msg)
                }
            }).catch(err => {
                self.$Toast.fail(err)
            })
        },
        /**
         * @description: 处理台账参数
         * @param {*} result
         * @return {*}
         */
        dealResultData(result) {
            this.assetParameters = this.arrChange(result.assetParam,result.assetParamConfigList);//资产参数
            console.log("this.assetParameters",this.assetParameters)
            this.operationParams = this.arrChange(result.runParam,result.runParamConfigList);//运行参数
            console.log("this.operationParams",this.operationParams)
            this.physicalParams = this.arrChange(result.physicsParam,result.physicsParamConfigList);//物理参数
            console.log("this.physicalParams",this.physicalParams)
        },
        /**
         * @description: 1.从设备配置项中获取名称  2.从参数中获取指定值
         * @param {*} obj  
         * @param {*} list
         * @return {*}
         */
        arrChange(obj,list){
            var arrList = [];
            if(!obj) {
               return arrList; 
            }
            var object = JSON.parse(obj);
            for(var result of list){
                if(object[result.labelAlias]){
                    arrList.push({
                        key: result.labelAlias,
                        labelName: result.labelText,
                        labelText: object[result.labelAlias],
                    })
                } 
            }
            return arrList;
        }
    },
    watch:{
        taskList(){
            
        }
    },
    filters: {
        
    },
    computed: {
       
    },
    mounted() {
        
    },
    created(){
        var userInfo = localStorage.getItem("userInfo");
        this.userInfo = JSON.parse(userInfo);
        this.taskInfo = this.$route.query.taskInfo;
        this.getDevAccount();
    }
}
</script>
<style scoped>
#fire_page {
    width: 100%;
    height: 100%;   
    padding-bottom: 0;
    background: #fff;
}
#fire_page /deep/ .van-nav-bar__title{
  font-size: 1.125rem;
}
#fire_page .van-nav-bar{
    background: #17B49B;
    color: #fff;
}
#fire_page /deep/ .van-nav-bar .van-nav-bar__content .van-icon{
    color: #fff;
}
#fire_page /deep/ .van-nav-bar .van-nav-bar__title{
    color: #fff;
}
#fire_page .content{
    height: 86vh;
    overflow: auto;
    margin-top: 45px;
    background: #fff;
}
#fire_page .van-cell-group{
    background: #FAFAFA;
}
.content-title{
    position: fixed;
    top:90px;
    z-index: 50;
}
.content-title .van-cell__title{
    font-size: 16px;
    color: #333;
}
.content-title .van-cell__value{
    font-size: 0.75rem;
    color: #999;
}
.content-list{
    width: calc(100% - 30px);
    margin-top: 10px;
    margin-bottom: 15px;
    margin-left: 15px;
    margin-right: 15px;
}
.content-list .van-cell{
    color: #323233;
    font-size: 0.75rem;
    line-height: 14px;
    background-color: #FAFAFA;
}
.content-list .van-cell .van-cell__title{
    color: #999;
}
.content-list .van-cell .van-cell__value{
    color: #333;
}
.content-list .van-cell .van-cell__label{
    color: #333;
}
.border-icon{
    width: 2px;
    height: 15px;
    border-radius: 10px;
    display: inline-block;
    background:#3CDAA8;
}
.content{
    margin-top: 45px;
    height: calc(100% - 45px);
    width: 100%;
}
.van-tabs__content{
    width: 100%;
}
#fire_page .van-tabs{
    width: 100% !important;
}
/deep/ .van-tab{
    font-size: 16px;
}
</style>